<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" @click="handleClose" size="mini">退出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" @click="handleSave" size="mini">保存</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" @click="handleSubmit" size="mini">提交审批</el-button>
      </el-col>
    </el-row>

    <el-form ref="form" :model="form" :rules="rules" label-width="140px" size="small">
      <el-row>
        <el-col :span="6">
          <el-form-item label="理财申购编号" prop="financePurchaseNumber">
            <el-input v-model="form.financePurchaseNumber" placeholder="请输入理财申购编号" style="width: 70%" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="投资业务名称" prop="financePurchaseName">
            <el-input v-model="form.financePurchaseName" placeholder="请输入投资业务名称" style="width: 70%"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="计划投资金额" prop="planInvestmentAmount">
            <el-input v-model="form.planInvestmentAmount" placeholder="请输入计划投资金额" style="width: 70%"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">

        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="年化收益率" prop="annualYield">
            <el-input v-model="form.annualYield" placeholder="请输入年化收益率" style="width: 70%"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="申购金额" prop="purchaseAmount">
            <el-input v-model="form.purchaseAmount" placeholder="请输入申购金额" style="width: 70%"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="转出金额总额" prop="rollOutAmount">
            <el-input v-model="form.rollOutAmount" placeholder="请输入转出金额总额" style="width: 70%"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="内扣申购费用总额" prop="rollInAmount">
            <el-input v-model="form.rollInAmount" placeholder="请输入内扣申购费用总额" style="width: 70%"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="申购日期" prop="actualPurchaseDate">
            <el-date-picker clearable v-model="form.actualPurchaseDate" type="date" value-format="yyyy-MM-dd"
                            placeholder="请选择申购日期" style="width: 70%">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="预计赎回到期日" prop="expectedDueDate">
            <el-date-picker clearable v-model="form.expectedDueDate" type="date" value-format="yyyy-MM-dd"
                            placeholder="请选择预计赎回到期日" style="width: 70%">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注" prop="description">
        <el-input v-model="form.description" type="textarea" placeholder="请输入备注" style="width: 70%"/>
      </el-form-item>

      <el-divider content-position="center">申购账户信息信息</el-divider>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddInvPurchaseRollOut">添加</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleDeleteInvPurchaseRollOut">删除
          </el-button>
        </el-col>
      </el-row>
      <el-table :data="invPurchaseRollOutList" :row-class-name="rowInvPurchaseRollOutIndex"
                @selection-change="handleInvPurchaseRollOutSelectionChange" ref="invPurchaseRollOut" height="calc(100vh - 500px)">
        <el-table-column type="selection" width="50" align="center"/>
        <el-table-column label="序号" align="center" prop="index" width="50"/>
        <el-table-column label="转出账户" prop="rollOutAccountIdN" width="150">
          <template slot-scope="scope">
            <el-input v-model="scope.row.rollOutAccountId" placeholder="转出账户"/>
          </template>
        </el-table-column>
        <el-table-column label="转出账户开户行" align="center" prop="bankName" min-width="150px"/>
        <el-table-column label="转出账户账号" align="center" prop="bankAccountNum" min-width="150px"/>
        <el-table-column label="转出金额" prop="rollOutAmount" width="150">
          <template slot-scope="scope">
            <el-input v-model="scope.row.rollOutAmount" placeholder="请输入转出金额"/>
          </template>
        </el-table-column>
        <el-table-column label="内扣申购费用" prop="rollInAmount" width="150">
          <template slot-scope="scope">
            <el-input v-model="scope.row.rollInAmount" placeholder="请输入内扣申购费用"/>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                  @pagination="getInvPurchaseRollOutList"/>
    </el-form>
  </div>
</template>

<script>
import {
  listFinancePurchase,
  getFinancePurchase,
  delFinancePurchase,
  addFinancePurchase,
  updateFinancePurchase
} from "@/api/loan/financePurchase";
import {
  listPurchaseRollOut,
  getPurchaseRollOut,
  delPurchaseRollOut,
  addPurchaseRollOut,
  updatePurchaseRollOut
} from "@/api/loan/purchaseRollOut";
import {saveFinancePurchase} from "../../../api/loan/financePurchase";

export default {
  name: "PurchaseDetail",
  dicts: ['sys_approve_status'],
  props: {
    select: Object
  },
  watch: {
    select: {
      handler(newVal, oldVal) {
        this.queryParams.financePurchaseId = newVal.financePurchaseId;
        this.getList();
      },
      //深度监控对象里面的值
      deep: true,
      //首次通过created去执行immediate: false设置未false
      immediate: true
    }
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 申购/赎回管理表单参数
      form: {},
      invPurchaseRollOutList: [],
      queryParams:{
        pageNum: 1,
        pageSize: 10,
        financePurchaseId:null
      },
      // 子表申购账户信息表格选中数据
      checkedInvPurchaseRollOut: [],
      // 弹出层标题
      title: "",

      // 表单校验
      rules: {},
    };
  },
  /*created() {
    this.financePurchaseId = this.select&&this.select.financePurchaseId;
    this.getList();
  },*/
  methods: {
    /** 查询申购/赎回管理列表 */
    getList() {
      this.loading = true;
      if(this.queryParams.financePurchaseId){
        //关联申购审批单
        this.getFinancePurchase();
        //申购账户信息
        this.getInvPurchaseRollOutList();
      }else{
        this.reset();
      }
      this.loading = false;
    },
    //get关联申购审批单
    getFinancePurchase(){
      getFinancePurchase(this.queryParams.financePurchaseId).then(response => {
        this.form = response.data;
      });
    },
    //get申购账户信息
    getInvPurchaseRollOutList(){
      listPurchaseRollOut(this.queryParams).then(response => {
        this.invPurchaseRollOutList = response.rows;
        this.total = response.total;
      });
    },
    // 表单重置
    reset() {
      this.form = {
        financePurchaseId: null,
        financeProductsId: null,
        financePurchaseNumber: null,
        financePurchaseName: null,
        planInvestmentAmount: null,
        purchaseAmount: null,
        redemptionAmount: null,
        planPurchaseDate: null,
        actualPurchaseDate: null,
        expectedDueDate: null,
        expectedDueDateChange: null,
        expectedDueDateChangeFlag: null,
        actualInvestmentAmount: null,
        description: null,
        rollOutAccountId: null,
        rollOutAmount: null,
        rollInAmount: null,
        purchaseStatus: "0",
        status: "0",
        redemptionStatus: "0",
        debitAccount: null,
        documentType: null,
        documentCategory: null,
        businessType: null,
        monthCollectionFlag: null,
        leftRedemptionAmount: null,
        annualYield: null,
        historyFlag: null,
        sourceAttachmentId: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
      };
      this.resetForm("form");
    },
    /** 申购账户信息序号 */
    rowInvPurchaseRollOutIndex({row, rowIndex}) {
      row.index = rowIndex + 1;
    },
    /** 申购账户信息添加按钮操作 */
    handleAddInvPurchaseRollOut() {
      let obj = {};
      obj.rollOutAccountId = "";
      obj.rollOutAmount = "";
      obj.rollInAmount = "";
      obj.buyoutId = "";
      obj.documentType = "";
      obj.documentCategory = "";
      obj.businessType = "";
      obj.historyFlag = "";
      this.invPurchaseRollOutList.push(obj);
    },
    /** 申购账户信息删除按钮操作 */
    handleDeleteInvPurchaseRollOut() {
      if (this.checkedInvPurchaseRollOut.length == 0) {
        this.$modal.msgError("请先选择要删除的申购账户信息数据");
      } else {
        const invPurchaseRollOutList = this.invPurchaseRollOutList;
        const checkedInvPurchaseRollOut = this.checkedInvPurchaseRollOut;
        this.invPurchaseRollOutList = invPurchaseRollOutList.filter(function (item) {
          return checkedInvPurchaseRollOut.indexOf(item.index) == -1
        });
      }
    },
    /** 复选框选中数据 */
    handleInvPurchaseRollOutSelectionChange(selection) {
      this.checkedInvPurchaseRollOut = selection.map(item => item.index)
    },
    /**退出*/
    handleClose(){
      this.select.cancel();
      this.reset();
    },
    /**保存*/
    handleSave(){
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.invPurchaseRollOutList = this.invPurchaseRollOutList;
          if (this.form.financePurchaseId != null) {
            saveFinancePurchase(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.getList();
            });
          } else {
            saveFinancePurchase(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.getList();
            });
          }
        }
      });
    },

    /**提交审批*/
    handleSubmit(){}
  }
};
</script>
